import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'

// App是所有组件的父组件
export default class App extends Component {

	//特别注意:状态在哪里，操作状态的方法就在哪里

	//初始化状态 状态中的数据驱动着页面的展示
	state = {
		todos: [
			//定义组件状态时需要考虑到业务逻辑
			{ id: '001', name: '吃饭', done: true },
			{ id: '002', name: '睡觉', done: true },
			{ id: '003', name: '打代码', done: false },
			{ id: '004', name: '逛街', done: false }
		]
	}

	//addTodo用于添加一个todo，接收的参数是todo对象
	addTodo = (todoObj) => {
		//获取原todos
		const { todos } = this.state
		//追加一个todo 重新定义一个新数组 在原数组之前添加新传递过来的对象
		const newTodos = [todoObj, ...todos]
		//更新状态
		this.setState({ todos: newTodos })
	}

	//updateTodo用于更新一个todo对象
	updateTodo = (id, done) => {
		//获取状态中的todos 解构赋值拿到todos
		const { todos } = this.state
		//匹配处理数据 遍历找到指定项后修改
		const newTodos = todos.map((todoObj) => {
			// return后是指整体拷贝todoObj对象后修改对象状态
			if (todoObj.id === id) return { ...todoObj, done }
			else return todoObj
		})
		this.setState({ todos: newTodos })
	}

	//deleteTodo用于删除一个todo对象
	deleteTodo = (id) => {
		//获取原来的todos
		const { todos } = this.state
		//删除指定id的todo对象 filter方法是数组里的过滤条件
		const newTodos = todos.filter((todoObj) => {
			// 如果相等就过滤 如果不相等就返回
			return todoObj.id !== id
		})
		//更新状态
		this.setState({ todos: newTodos })
	}

	//checkAllTodo用于全选
	checkAllTodo = (done) => {
		//获取原来的todos
		const { todos } = this.state
		//加工数据 遍历todos追加新状态
		const newTodos = todos.map((todoObj) => {
			return { ...todoObj, done }
		})
		//更新状态
		this.setState({ todos: newTodos })
	}

	//clearAllDone用于清除所有已完成的
	clearAllDone = () => {
		//获取原来的todos
		const { todos } = this.state
		//过滤数据 filter()检查指定数组中符合条件的所有元素
		const newTodos = todos.filter((todoObj) => {
			// 这里取反返回的新数组内不会有含有true的元素
			return todoObj.done === false
		})
		//更新状态
		this.setState({ todos: newTodos })
	}

	render() {
		// 解构赋值
		const { todos } = this.state
		return (
			<div className="todo-container">
				<div className="todo-wrap">
					<Header addTodo={this.addTodo} />
					{/* 这里要先传递给list子组件 然后用list子组件传递给item子组件 */}
					<List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
					<Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone} />
				</div>
			</div>
		)
	}
}
